<%@page pageEncoding="UTF-8" isELIgnored="false"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="f" uri="http://www.slim3.org/functions"%>
<%@ taglib prefix="m" uri="http://taglibs.mobylet.org/" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<m:charset/>" />
<title>なかまちず</title>
<c:import url="/jsp/pc/keyword.jsp"/>
<link rel="stylesheet" type="text/css" href="/css/global.css" />
<style type="text/css">
  html { overflow: auto; }
  html, body, td, th { font-family: Arial, sans-serif; margin: 0px; padding: 0px; height: 100%; font-size: 10pt; color: #333333; }
  .text { font-family: Arial, sans-serif; margin: 0px; padding: 0px 10px; height: 100%; font-size: 10pt; color: #333333; }
  #map { position: absolute; top: 30px; left: 10px; width: 600px; height: 450px;}
  #map img { cursor: crosshair; }
  img { border: 0px; }
  form { margin: 0; padding: 0; font-family: Arial, sans-serif; font-size: 10pt; }
  input, textarea { margin: 3px 0 0 0; padding: 0; font-family: Arial, sans-serif; font-size: 10pt; }
  #side_bar { position: absolute; top: 6px; left: 620px; border: 1px solid #666; padding: 5px; line-height: 1.8; overflow:auto; background: url(/icon/white70per.png); width: 150px; height: 462px; }
  #header { background-color: #ffffff; position:absolute; top: 6px; left: 10px; z-index: 99; width: 592px; padding: 2px 4px; overflow: hidden; }
  div.errors { color: red; font-weight: bold; position: absolute; top: 35px; left: 15px; border: 1px solid #666; padding: 0px 5px; overflow:auto; background: url(/icon/white70per.png); width: 300px; height: 60px; }
  #main { background-color: #ffffff; font-size: 10pt; position: relative; top: 0px; left: 0px; border: 0px solid #666; }
  #body { background-color: #ffffff; font-size: 10pt; border: 1px solid #666; width: 680px; padding: 2px 4px; margin: 10px;}
  #help { background-color: #ffffff; font-size: 10pt; width: 759px; height: 120px; padding: 2px 4px; margin: 10px; border: 3px solid #99b3cc; }
  #copy { font-size: 8pt; position: absolute; top: 490px; left: 650px; }
  #footer { font-size: 10pt; margin: 10px;}
  .mailAddress { text-decoration: underline; cursor: pointer; margin: 1px 5px; }
  #adsense { font-size: 10pt; position: absolute; top: 10px; left: 710px; }
</style>
</head>
<body>

<div id="body"><!-- start body -->
<h1>なかまちずヘルプ</h1>
<br/>


<ol>
 <li><strong>Googleアカウントを取得する</strong></li>
なかまちずでは、ユーザ認証にGoogleアカウントを使用します。<br/>
まず、Googleアカウントを取得してください。<br/>
なかまちずのメール送信フォームを使ってメールを送信する場合、<br/>
初期設定ではこのアカウントのメールアドレスが送信者(from)になります。<br/>
※送信者はシステムのアドレスに変更することもできます。<br/><br/>

 <li><strong>地図へログインする</strong></li>
作ったアカウントで地図へログインします。<br/>
初めてログインすると下図のようなログイン画面が表示されます。<br/>
<img src="/images/nakamachizu_login.png"/><br/>
まず、地図を新規に作成するから、地図を作ります。<br/><br/>

 <li><strong>地図編集画面でランドマークを追加する</strong></li>
作ったばかりの地図は、下図のように東京駅が中央に表示されるだけの何もない白紙の地図です。<br/>
好きなところをクリックしてランドマークを追加してください。<br/>
<img src="/images/nakamachizu_map00.png"/><br/><br/>

 <li><strong>携帯電話でアクセスする</strong></li>
ランドマークをいくつか追加したら携帯電話でアクセスしていましょう。<br/>
アクセスURLを入力するのは大変なので、QRコードを読み取ってアクセスします。<br/>
<img src="/images/nakamachizu_map01.png"/><br/><br/>
携帯電話で見ると下図のようになります。<br/>
携帯電話での地図の移動や拡大縮小はコントロールパネルの矢印で行います。<br/>
位置情報を送信するリンクは、携帯のGPSなどの位置情報を送信して地図へ表示する機能です。<br/>
<img src="/images/nakamachizu_map03.png"/><br/><br/>

 <li><strong>地図の設定を変更する</strong></li>
地図の設定は、タイトル、有効期限、閲覧パスワード、ライン表示形式、メール送信元の設定ができます。<br/>
タイトルは設定すると地図の上部へ表示されるようになります。<br/>
ここで設定した有効期限を過ぎると、地図は自動的に削除されます。<br/>
閲覧パスワードは地図を見るときに入力するパスワードです。間違えると地図を見ることはできません。<br/>
ライン表示形式は、パソコンで見た場合にだけ効果を発揮します。<br/>
ルートに設定すると、2点間を直線ではなく道路を通るようになります。<br/>
メール送信元設定は、友達へメールを送る場合にfromになるアドレスです。<br/>
初期設定ではGoogleアカウントのメールアドレスですが、システムで用意したメールアドレスへ変更することもできます。<br/>
<img src="/images/nakamachizu_map04.png"/><br/><br/>

 <li><strong>携帯電話で位置を送信する</strong></li>
携帯電話で地図へアクセスして、位置情報を送信すると現在位置が地図上に表示されます。<br/>
現在位置は青いマーカーで表示され、位置の微調整で調整することができます。<br/>
位置情報の確定ではオプションを選択することもでき、前回の位置からこの位置にラインを引くか、<br/>
この位置にランドマークを追加するかを選択することができます。<br/>
位置を確定後に名前とコメントを編集することができます。<br/>
<img src="/images/nakamachizu_map05.png"/><br/><br/>

</ol>


</div><!-- end body -->

<p class="indent"><a href="http://www.nakamachizu.com">トップページへ戻る</a></p>
<br/><br/>

<div id="adsense">
<c:import url="/jsp/pc/adsense.jsp"/>
</div>
<c:import url="/jsp/pc/analytics.jsp"/>
</body>
</html>